<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>SheetAboutInput</title>
    <script src="../Vue.js" type="text/javascript"></script>
</head>
<body>

    <div id="app">

        <!--单行文本-->
        <p>当前单行文本内容:{{content1}}</p>
        <div>请输入文本内容：<input v-model="content1" value="" placeholder="单行文本内容"></div>

        <!--多行文本-->
        <p>当前多行文本内容:{{content1}}</p>
        <div>请输入文本内容：<textarea v-model="content1" value="" placeholder="多行文本内容"></textarea></div>

        <!--复选框-->
        <p>当前复选内容:{{content2}}</p>
        <div>想读博士嘛：<input v-model="content2" type="checkbox"></div>


        <!--复选框-->
        <p>当前复选内容:{{content3}}</p>
        <div>想去旅游的城市：重庆<input v-model="content3" type="checkbox" value="重庆">
                            漳州<input v-model="content3" type="checkbox" value="漳州">
                            长沙<input v-model="content3" type="checkbox" value="长沙"></div>

        <!--单选框-->
        <p>当前选择内容:{{content4}}</p>
        <div>最想去旅游的城市：重庆<input v-model="content4" type="radio" value="重庆">
                            漳州<input v-model="content4" type="radio" value="漳州">
                            长沙<input v-model="content4" type="radio" value="长沙"></div>

        <!--选择框-->
        <p>当前选择内容:{{content5}}</p>
        <div>
            这道题选择:
            <!--多选时加上multiple style-->
            <select v-model="content5">
                <option>A</option>
                <option>B</option>
                <option>C</option>
            </select>
        </div>

        <!-- 在“change”时而非“input”时更新 -->
        <input v-model.lazy="msg">

        <!-- 自动将用户的输入值转为数值类型 -->
        <input v-model.number="age" type="number">

        <!-- 自动过滤用户输入的首尾空白字符 -->
        <input v-model.trim="msg">
    </div>

    <script>
        let app = new Vue({
            el:"#app",
            data:{
            	content1: "",
                content2: false,
                content3: [],
                content4:"",
                content5:""
            }
        })
    </script>

</body>
</html>